<template>
  <component is="a-modal" v-model:visible="visible" :width="1200" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" @before-ok="submit" >
    <div style="height: 70vh;overflow-y: scroll;">
      <a-descriptions title="订单信息" :column="2" bordered size="large">
      <a-descriptions-item label="订单ID" :span="1">{{ detailInfo.info?.order?.id }}</a-descriptions-item>
      <a-descriptions-item label="单号" :span="1">{{ detailInfo.info?.order?.order_sn }}</a-descriptions-item>
    </a-descriptions>
    <div style="margin:10px 0">日志信息</div>
    <a-table :columns="columns" :data="detailInfo.log" :stripe="true" :pagination="false">
    </a-table>
    </div>
    <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        :auto-label-width="true"
      >
        <a-form-item label="解绑溯源码" field="type" v-if="mode=='release'">
         <sa-radio :data="TYPE" v-model="formData.type"></sa-radio>
        </a-form-item>
        <a-form-item label="新溯源码" field="new_code" v-else>
         <a-input  v-model="formData.new_code" placeholder="请输入新溯源码"></a-input>
        </a-form-item>
        <a-form-item label="操作密码" field="admin_pay_password">
          <a-input-password
            v-model="formData.admin_pay_password"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="谷歌验证码" field="google_code">
          <a-input v-model="formData.google_code" placeholder="请输入" />
        </a-form-item>
      </a-form>


  </component>
</template>

<script setup>
import { ref, reactive, computed, watch, onBeforeUnmount, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import SaRadio from '@cps/sa-radio/index.vue'
import AsApi from '@/api/system/afterSale'
import { throttle } from "lodash";
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'
const emit = defineEmits(["success"]);
const visible = ref(false);
const loading = ref(false);
const formRef=ref()
const TYPE=[
  {title:'单条',value:1},
  {title:'该订单所有',value:2},
]
const spinLoading = ref(false)
const title=ref('')
const columns = reactive([
  { title: '订单ID', dataIndex: 'order_id', width: 200 },
  { title: '解绑溯源码', dataIndex: 'old_code', width: 200 },
  { title: '时间', dataIndex: 'create_time', width: 200 },
])
const formData=reactive({
  type:1,
  admin_pay_password: "",
  google_code: "",
  new_code:'',
  code:'',
})
// 验证规则
const rules = ref({
  code: [{ required: true, message: "请输入" }],
  type: [{ required: true, message: "请选择" }],
  google_code: [{ required: true, message: "请输入" }],
  admin_pay_password: [{ required: true, message: "请输入" }],
  new_code: [{ required: true, message: "请输入" }],
});
const detailInfo = ref({})
const getData = async (code) => {////在頁面打開之前須加載完成要不然播放报錯
  const { data } =mode.value=='release'? await AsApi.release_source_code_params(code): await AsApi.change_source_code_params(code)
  detailInfo.value = { ...data }
}

// 打开弹框
const mode=ref('')
const open = async (type,data) => {
  visible.value = true;
  formRef.value.resetFields();
  mode.value=type
  spinLoading.value = true
  formData.code=data.code
  if(type=='release'){
    await getData(data.code)
    title.value='解绑: '+data.code
  }else{
     await getData(data.code)
    title.value='换绑: '+data.code
  }
  
};
const submit = throttle(async (done) => {
  const validate = await formRef.value?.validate();
  if (!validate) {
    loading.value = true;
    try {
      let data = { ...formData };
      console.log('data',data);
      let result = {};
      if (mode.value === "release") {
        delete data.new_code
        result = await AsApi.release_source_code(data);
      } else {
        // 修改数据
        delete data.type
        result = await AsApi.change_source_code(data);
      }
      if (result.code === 200) {
        Message.success("操作成功");
        emit("success");
        done(true);
      }
      // 防止连续点击提交
      setTimeout(() => {
        loading.value = false;
      }, 500);
    } catch {
      loading.value = false;
    }
  }
  done(false);
}, 100);

// 关闭弹窗
const close = () => {
  visible.value = false
};
defineExpose({ open, getData });
</script>